<template>
  <div>
    <insert-leave-apply  @postInsert="queryByCondition">
      <template #insertButton="that">
        <el-button type="primary" @click="insert(that)"
          >具名作用域插槽提交</el-button
        >
      </template>
    </insert-leave-apply>
    <el-form
      ref="searchForm"
      class="searchForm"
      :model="searchForm"
      label-width="50"
    >
      <el-row :gutter="12">
        <!--        合计24份  -->
        <el-col :span="6">
          <el-form-item prop="queryCondition.leaveId" label="ID">
            <el-input v-model.trim="searchForm.queryCondition.leaveId">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.auditorSimilar" label="审核人">
            <el-input v-model="searchForm.queryCondition.auditorSimilar">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.applyTimeStart" label="申请时间">
            <!--            <el-input v-model="searchForm.queryCondition.applyTimeStart">-->
            <!--            </el-input>-->
            <el-date-picker
              v-model="searchForm.queryCondition.applyTimeStart"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="queryCondition.applyTimeEnd" label="到">
            <el-date-picker
              v-model="searchForm.queryCondition.applyTimeEnd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="queryCondition.applyStates" label="申请状态">
            <el-checkbox-group v-model="searchForm.queryCondition.applyStates">
              <el-checkbox
                v-for="i in applyStates"
                :key="i.value"
                :label="i.value"
                border
                >{{ i.text }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="queryCondition.leaveTypes" label="请假类型">
            <el-checkbox-group v-model="searchForm.queryCondition.leaveTypes">
              <el-checkbox
                v-for="(e, i) in leaveTypes"
                :key="i"
                :label="e.value"
                border
                >{{ e.text }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-edit"
          @click="queryByCondition(1)"
          >查询</el-button
        >
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.searchForm.resetFields()"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      :data="results"
      class="resultsTable"
      stripe
      v-loading="tableLoading"
    >
      <el-table-column width="60px" prop="leaveId" label="ID"></el-table-column>
      <el-table-column
        width="150px"
        label="请假原因"
        :formatter="(row) => row.reason.substr(0, 8) + '...'"
      ></el-table-column>

      <el-table-column label="请假类型" :formatter="leaveTypeFormat">
      </el-table-column>
      <el-table-column label="申请状态" :formatter="applyStateFormat">
      </el-table-column>
      <el-table-column
        label="审核状态"
        :formatter="
          (row) => auditStates.find((x) => x.value === row.auditState)
        "
      >
      </el-table-column>
      <el-table-column
        label="审核人"
        :formatter="auditorFormat"
      ></el-table-column>
      <el-table-column
        label="请假申请时间"
        :formatter="applyTimeFormat"
      ></el-table-column>
      <el-table-column width="270" fixed="left">
        <!--        <template  slot-scope="props">-->
        <template #default="props">
          <el-button
            class="el-button--mini"
            type="warning"
            icon="el-icon-edit"
            @click="openById(props.row.leaveId)"
            >编辑</el-button
          >
          <el-button
            class="el-button--mini"
            type="danger"
            icon="el-icon-edit"
            @click="submitById(props.row.leaveId)"
            >提交</el-button
          >
          <el-popconfirm title="确实要进行？" @confirm="confirmById(props.row.leaveId)" >
            <el-button slot="reference" class="el-button--mini"
                    type="success"
                    icon="el-icon-edit"
            >确认</el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :page-size="searchForm.pageSize"
      :current-page="searchForm.pageNum"
      @current-change="queryByCondition"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
    <modify-leave-apply
      ref="modifyDialog"
      @postModify="queryByCondition"
    ></modify-leave-apply>
  </div>
</template>

<script>
import { mapState } from "vuex";
import InsertLeaveApply from "@/components/InsertLeaveApply";
import ModifyLeaveApply from "@/components/ModifyLeaveApply";
import {leaveModuleApi} from "@/api/apis"
export default {
  name: "LeaveApply",
  components: {
    ModifyLeaveApply,
    InsertLeaveApply,
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      modifyApply: {},

      modifyDialogVisibility: false,
      searchForm: {
        pageNum: 1,
        pageSize: 8,
        queryCondition: {
          applyTimeEnd: null,
          applyTimeStart: null,
          auditorSimilar: null,
          leaveId: null,
          applyStates: [],
          leaveTypes: [],
        },
      },

      total: 3,
      results: [
        {
          leaveId: 15,
          leaveType: "sickLeave",
          reason: "我是李白，诗兴大方，请假去游",
          startTime: "2021-06-16T16:00:00",
          endTime: "2021-06-24T16:00:00",
          applier: "anonymous007",
          applyState: "saved",
          applyTime: "2021-07-20T11:08:38.513",
          auditState: "notAudit",
          auditor: null,
          auditorWord: null,
        },
      ],
      tableLoading: false,
      // jquery documeentgetbyId 获取dom元素的引用 然后更改dom元素的状态 js是配置html工作的
      //  MVVM模型的思维 搭建关系  直接更改js变量 html本身是个辅助 js才是主力 data里的 vuex里的
    };
  },
  computed: {
    ...mapState(["applyStates", "auditStates", "leaveTypes"]),
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {
    // this.$store.dispatch("getAuditStates")
    // this.getAuditStates();
    // this.getApplyStates();
    // this.getLeaveTypes();
    // this.getApply();
    // this.getAudit();
    // this.getLeave();
  },
  mounted() {
    this.queryByCondition(1);
    // this.$store.dispatch("getApplyStates");
  },
  methods: {
    // ...mapActions(["getApplyStates", "getAuditStates", "getLeaveTypes"]),
    // ...mapActions({
    //   getApply:"getApplyStates",
    //   getAudit:"getAuditStates",
    //   getLeave:"getLeaveTypes"
    // }),
    sampleM() {},
    queryByCondition(pageNum) {
      if (pageNum) this.searchForm.pageNum = pageNum;
      this.tableLoading = true;
      leaveModuleApi.leaveQueryApplyApi(this.searchForm)
      .then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
          setTimeout(() => {
            this.tableLoading = false;
          }, 1000);
        },
        (error) => {
          this.$message.warning("query mistake：" + error.response.status);
        }
      );
    },
    insert(that) {
      let k = that.mockInsert();
      k.then((res) => {
        this.queryByCondition(1);
      });
    },
    leaveTypeFormat(row) {
      return this.leaveTypes.find((x) => x.value === row.leaveType);
    },
    applyStateFormat(row) {
      return this.applyStates.find((x) => x.value === row.applyState);
    },
    applyTimeFormat(row) {
      return row.applyTime.substr(0, 10);
    },
    auditorFormat(row) {
      if (row.auditor === null) {
        return "N/A";
      } else {
        return row.auditor;
      }
    },
    openById(leaveId) {
      // this.$http({
      //   method: "get",
      //   url: `/leaveAbout/leave/apply/${leaveId}`,
      // })
      leaveModuleApi.leaveGetApplyApi(leaveId)
      .then(
        (res) => {
          // this.$message.warning(JSON.stringify(res.data.leaveId));
          // this.modifyApply = res.data;
          this.$refs.modifyDialog.OpenLeaveApply(res.data);
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    submitById(id) {
      this.$confirm("确实要进行？").then((x) => {
        // this.$http({
        //   method: "put",
        //   url: `/leaveAbout/leave/submit/${id}`,
        // })
        leaveModuleApi.leaveSubmitApi(id)
        .then(
          (res) => {
            this.$message.warning(JSON.stringify(res.data));
            this.queryByCondition();
          },
          (error) => {
            console.log(" request error : " + error.response.status);
          }
        );
      });
    },

    confirmById(id) {
      // this.$http({
      //   method: "put",
      //   url: `/leaveAbout/leave/confirm/${id}`,
      // })
      leaveModuleApi.leaveConfirmApi(id)
      .then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.queryByCondition();
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<style lang="scss" scoped></style>
